<template>
  <div class="propertyDetails">
    <span class="el-icon-s-promotion">地产详情</span>
    <div class="main" >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <el-row v-model="formData">
            <el-col :span="12"><h1>{{formData.title}}</h1></el-col>
          </el-row>
        </div>
        <el-row class="bottom" v-model="formData">
          <!-- 图片展示 -->
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <el-carousel height="450px">
                <el-carousel-item v-for="(item, index) in formData.photos" :key="index">
                  <el-image :src="item"></el-image>
                </el-carousel-item>
              </el-carousel>
            </div>
          </el-col>
          <el-col :span="12" v-model="formData">
            <div class="grid-content bg-purple-light">
              <!-- 房源信息 -->
              <!-- 标签 -->
              <div class="tag-group">
                <el-tag
                  v-for="(item,index) in formData.tags"
                  :key="index"
                  effect="dark"
                >
                  {{ item }}
                </el-tag>
              </div>
              <div><span class="el-icon-question"></span>参考价格:<span class="price">{{formData.price}}￥/㎡</span></div>
              <div><span class="el-icon-office-building"></span>楼盘类型:<span></span></div>
              <div><span class="el-icon-location"></span>项目地址:<span>{{formData.address}}</span></div>
              <div><span class="el-icon-alarm-clock"></span>最新开盘:<span class="time">{{formData.updated_at}}</span></div>
              <div>
                <div><span class="el-icon-document"></span>经纪人信息：</div>
                <div class="agentInfo">
                  <img src="../assets/jihao.jpg" alt="" width="100px" height="140px"/>
                  <div>
                    <h3>{{agentsList.name}}</h3>
                    <div class="phone">联系电话:{{agentsList.phone}}</div>
                    <div class="emil">电子邮件:{{agentsList.email}}</div>
                  </div>
                  <el-button type="success">在线联系</el-button>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-model="formData">
            <div class="introduce" >介绍:<span>{{formData.desc}}</span></div>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getPropertys } from "@/api/property";
export default {
  data() {
    return {
      formData:{},
      agentsList:{}
    };
  },
  async created(){
    let id = this.$route.query.id
    let res = await getPropertys(id)
    this.formData = res.data
    if (this.formData.agent !== null) {
        this.agentsList = this.formData.agent
    }else{
        this.agentsList = ''
    }
    console.log(this.formData);
  }
};
</script>

<style lang="scss">
.phone{
    margin-bottom: 10px;
}
//时间
.time{
    color: red;
}
//价格
.price{
    color: red;
    font-size: 24px;
}
// 介绍
.introduce{
    font-size: 20px;
    padding: 10px;
    span{
        font-size: 16px;
    }
}
//经纪人信息
.agentInfo {
  display: flex;
  padding: 10px 0;
  border: 1px solid #20ed72;
  margin-top: 10px;
  width: 80%;
  h3{
    color: red;
  }
  img {
    margin: 20px 20px;
  }
    .el-button{
        height: 50px;
        margin:auto 50px;
        font-size: 16px;
    }
}
//主板块
.propertyDetails {
  .main {
    width: 80%;
    height: 700px;
    margin: 0 auto;
    .bottom {
      height: 80%;
    }
  }
}
//图标
.el-icon-s-promotion {
  font-size: 24px;
  color: #eba73a;
  margin-bottom: 10px;
  margin-left: 10%;
}

.bg-purple-light {
  margin-left: 10px;
  div {
    font-size: 20px;
    padding-top: 8px;
    color: #9c9fa1;
    span {
      padding: 0 10px;
    }
  }
}
.el-tag {
  margin-right: 5px;
}
.clearfix {
  height: 50px;
  h1 {
    margin-top: 5px;
  }
}
.el-image{
    width: 100%;
    height: 100%;
}
</style>